<template>
  <div class='fx-comments'>
    <el-row :gutter='10' style='display: flex;align-items: center;justify-content: center;'>
      <el-col :span='1'>
        <el-avatar style='width: 60px;height: 60px' :src='userData.avatar' />
      </el-col>
      <el-col :span='16'>
        <el-input rows='2' type='textarea' v-model='commentValue' placeholder='良言一句三冬暖，恶语伤人六月寒' />
      </el-col>
      <el-col :span='2'>
        <el-button style='height: 50px;' type='primary' @click='sendComment'>发表</el-button>
      </el-col>
    </el-row>
    <div v-if='comments.length'>
      <el-card
        body-style='padding: 10px;'
        style='margin-top: 20px;'
        v-for='(comment, index) in comments'
        :key='index'
      >
        <div>
          <el-row :gutter='10' style='display:flex;align-items: center;'>
            <el-col :span='1' style='display: flex;justify-content: center;'>
              <el-avatar :src='comment.userData.avatar' />
            </el-col>
            <el-col :span='20'>
              <div style='display: flex; align-items: center;'>
                <h3 style='margin-right: 10px;'>{{ comment.userData.name }} </h3>
                <strong v-if='comment.isAuthor'>作者</strong>
                <strong class='admin' v-if='comment.userData.isAdmin'>管理员</strong>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter='10'>
            <el-col :span='24' :offset='1'>
              <p>{{ comment.content }}</p>
            </el-col>
          </el-row>
          <el-row :gutter='10'>
            <el-col :span='22' :offset='1' style='display: flex;align-items: center;justify-content: space-between;'>
              <p style='color: #8c939d;'>{{ comment.lastModified | timeFormat }}</p>
              <div class='operations'>
              <span class='iconfont'
                    :class="comment.isLike ? 'good-fill' : 'good'"
                    @click='switchLike(comment)'
              > {{ comment.likes.length }} </span>
                <span class='iconfont comments-fill'
                      @click='switchReply(comment)'> {{ comment.isReply ? '取消' : '回复' }}</span>
                <span class='el-icon-delete-solid'
                      @click='deleteComment(comment)'
                      v-if='userData.isAdmin || userData.isAuthor || userData.name === comment.userData.name'
                > 删除</span>
                <span class='iconfont juBao'
                      v-if='comment.userData.name !== userData.name'
                      @click='tipOffComment(comment)'> 举报</span>
              </div>
            </el-col>
          </el-row>
          <el-row
            :gutter='10'
            style='display: flex;align-items: center;justify-content: end;'
            v-if='comment.isReply'
          >
            <el-col :span='1'>
              <el-avatar :src='userData.avatar' />
            </el-col>
            <el-col :span='8'>
              <el-input v-model='replyValue' :placeholder="'回复 @ ' + comment.userData.name" />
            </el-col>
            <el-col :span='2'>
              <el-button type='primary' size='small' @click='replyTo(comment)'>回复</el-button>
            </el-col>
          </el-row>
        </div>

        <div v-if='comment.replies.length <= 2'>
          <el-row
            :gutter='10'
            v-for='(reply, replyIndex) in comment.replies'
            :key='replyIndex'
          >
            <el-col :span='22' :offset='1'>
              <el-card body-style='padding: 10px;' style='margin-top: 10px;'>
                <div>
                  <el-row :gutter='10' style='display:flex;align-items: center;'>
                    <el-col :span='1' style='display: flex;justify-content: center;'>
                      <el-avatar :src='reply.userData.avatar' />
                    </el-col>
                    <el-col :span='20' style='display: flex;align-items: center;'>
                      <h3 style='margin-right: 10px;'>{{ reply.userData.name }}</h3>
                      <strong v-if='reply.isAuthor'>作者</strong>
                      <strong class='admin' v-if='reply.userData.isAdmin'>管理员</strong>
                      <h3 v-if='reply.replyTo.commentId !== comment.commentId'> 🚩 {{ reply.replyTo.name }}</h3>
                    </el-col>
                  </el-row>

                  <el-row :gutter='10'>
                    <el-col :span='22' :offset='1'>
                      <p>{{ reply.content }}</p>
                    </el-col>
                  </el-row>

                  <el-row :gutter='10'>
                    <el-col :span='22'
                            :offset='1'
                            style='display: flex;align-items: center;justify-content: space-between;'
                    >
                      <p style='color: #8c939d;'>{{ reply.lastModified | timeFormat }}</p>
                      <div class='operations'>
                      <span class='iconfont'
                            :class="reply.isLike ? 'good-fill' : 'good'"
                            @click='switchLike(reply,comment)'
                      > {{ reply.likes.length }} </span>
                        <span class='iconfont comments-fill'
                              @click='switchReply(reply)'> {{ reply.isReply ? '取消' : '回复' }}</span>
                        <span class='el-icon-delete-solid'
                              @click='deleteReplyTo(reply,comment)'
                              v-if='userData.isAdmin || userData.isAuthor || userData.name === reply.userData.name'
                        > 删除</span>
                        <span class='iconfont juBao'
                              v-if='reply.userData.name !== userData.name'
                              @click='tipOffComment(reply,comment)'> 举报</span>
                      </div>
                    </el-col>
                  </el-row>
                  <el-row
                    :gutter='10'
                    style='display: flex;align-items: center;justify-content: end;'
                    v-if='reply.isReply'
                  >
                    <el-col :span='1'>
                      <el-avatar :src='userData.avatar' />
                    </el-col>
                    <el-col :span='8'>
                      <el-input v-model='replyValue' :placeholder="'回复 @ ' + reply.userData.name" />
                    </el-col>
                    <el-col :span='2'>
                      <el-button type='primary' size='small' @click='replyTo(reply,comment)'>回复</el-button>
                    </el-col>
                  </el-row>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>

        <div v-else>
          <div v-if='!isAll'>

            <el-row :gutter='10'>
              <el-col :span='22' :offset='1'>
                <el-card body-style='padding: 10px;' style='margin-top: 10px;'>
                  <div>
                    <el-row :gutter='10' style='display:flex;align-items: center;'>
                      <el-col :span='1' style='display: flex;justify-content: center;'>
                        <el-avatar :src='comment.replies[0].userData.avatar' />
                      </el-col>
                      <el-col :span='20' style='display: flex;align-items: center;'>
                        <h3 style='margin-right: 10px;'>{{ comment.replies[0].userData.name }}</h3>
                        <strong v-if='comment.replies[0].isAuthor'>作者</strong>
                        <strong class='admin' v-if='comment.replies[0].userData.isAdmin'>管理员</strong>
                        <h3 v-if='comment.replies[0].replyTo.commentId !== comment.commentId'> 🚩 {{
                            comment.replies[0].replyTo.name
                          }}</h3>
                      </el-col>
                    </el-row>

                    <el-row :gutter='10'>
                      <el-col :span='22' :offset='1'>
                        <p>{{ comment.replies[0].content }}</p>
                      </el-col>
                    </el-row>

                    <el-row :gutter='10'>
                      <el-col :span='22'
                              :offset='1'
                              style='display: flex;align-items: center;justify-content: space-between;'
                      >
                        <p style='color: #8c939d;'>{{ comment.replies[0].lastModified | timeFormat }}</p>
                        <div class='operations'>
                        <span class='iconfont'
                              :class="comment.replies[0].isLike ? 'good-fill' : 'good'"
                              @click='switchLike(comment.replies[0],comment)'
                        > {{ comment.replies[0].likes.length }} </span>
                          <span class='iconfont comments-fill'
                                @click='switchReply(comment.replies[0])'> {{
                              comment.replies[0].isReply ? '取消' : '回复'
                            }}</span>
                          <span class='el-icon-delete-solid'
                                @click='deleteReplyTo(comment.replies[0],comment)'
                                v-if='userData.isAdmin || userData.isAuthor || userData.name === comment.replies[0].userData.name'
                          > 删除</span>
                          <span class='iconfont juBao'
                                v-if='comment.replies[0].userData.name !== userData.name'
                                @click='tipOffComment(comment.replies[0],comment)'> 举报</span>
                        </div>
                      </el-col>
                    </el-row>
                    <el-row
                      :gutter='10'
                      style='display: flex;align-items: center;justify-content: end;'
                      v-if='comment.replies[0].isReply'
                    >
                      <el-col :span='1'>
                        <el-avatar :src='userData.avatar' />
                      </el-col>
                      <el-col :span='8'>
                        <el-input v-model='replyValue' :placeholder="'回复 @ ' + comment.replies[0].userData.name" />
                      </el-col>
                      <el-col :span='2'>
                        <el-button type='primary' size='small' @click='replyTo(comment.replies[0], comment)'>回复
                        </el-button>
                      </el-col>
                    </el-row>
                  </div>
                </el-card>
              </el-col>
            </el-row>

            <el-row :gutter='10'>
              <el-row :gutter='10'>
                <el-col :span='22' :offset='1'>
                  <el-card body-style='padding: 10px;' style='margin-top: 10px;'>
                    <div>
                      <el-row :gutter='10' style='display:flex;align-items: center;'>
                        <el-col :span='1' style='display: flex;justify-content: center;'>
                          <el-avatar :src='comment.replies[1].userData.avatar' />
                        </el-col>
                        <el-col :span='20' style='display: flex;align-items: center;'>
                          <h3 style='margin-right: 10px;'>{{ comment.replies[1].userData.name }}</h3>
                          <strong v-if='comment.replies[1].isAuthor'>作者</strong>
                          <strong class='admin' v-if='comment.replies[1].userData.isAdmin'>管理员</strong>
                          <h3 v-if='comment.replies[1].replyTo.commentId !== comment.commentId'> 🚩 {{
                              comment.replies[1].replyTo.name
                            }}</h3>
                        </el-col>
                      </el-row>

                      <el-row :gutter='10'>
                        <el-col :span='22' :offset='1'>
                          <p>{{ comment.replies[1].content }}</p>
                        </el-col>
                      </el-row>

                      <el-row :gutter='10'>
                        <el-col :span='22'
                                :offset='1'
                                style='display: flex;align-items: center;justify-content: space-between;'
                        >
                          <p style='color: #8c939d;'>{{ comment.replies[1].lastModified | timeFormat }}</p>
                          <div class='operations'>
                          <span class='iconfont'
                                :class="comment.replies[1].isLike ? 'good-fill' : 'good'"
                                @click='switchLike(comment.replies[1],comment)'
                          > {{ comment.replies[1].likes.length }} </span>
                            <span class='iconfont comments-fill'
                                  @click='switchReply(comment.replies[1])'> {{
                                comment.replies[1].isReply ? '取消' : '回复'
                              }}</span>
                            <span class='el-icon-delete-solid'
                                  @click='deleteReplyTo(comment.replies[1],comment)'
                                  v-if='userData.isAdmin || userData.isAuthor || userData.name === comment.replies[1].userData.name'
                            > 删除</span>
                            <span class='iconfont juBao'
                                  v-if='comment.replies[1].userData.name !== userData.name'
                                  @click='tipOffComment(comment.replies[1],comment)'> 举报</span>
                          </div>
                        </el-col>
                      </el-row>
                      <el-row
                        :gutter='10'
                        style='display: flex;align-items: center;justify-content: end;'
                        v-if='comment.replies[1].isReply'
                      >
                        <el-col :span='1'>
                          <el-avatar :src='userData.avatar' />
                        </el-col>
                        <el-col :span='8'>
                          <el-input v-model='replyValue' :placeholder="'回复 @ ' + comment.replies[1].userData.name" />
                        </el-col>
                        <el-col :span='2'>
                          <el-button type='primary' size='small' @click='replyTo(comment.replies[1],comment)'>回复
                          </el-button>
                        </el-col>
                      </el-row>
                    </div>
                  </el-card>
                </el-col>
              </el-row>

              <el-row :gutter='10'>
                <el-col :span='12' :offset='1'>
                  <p class='showAll'>
                    <span @click='isAll = true'>查看全部 {{ comment.replies.length }} 条评论 ▶</span>
                  </p>
                </el-col>
              </el-row>
            </el-row>
          </div>

          <div v-else>
            <el-row
              :gutter='10'
              v-for='(reply, replyIndex) in comment.replies'
              :key='replyIndex'
            >
              <el-row :gutter='10'>
                <el-col :span='22' :offset='1'>
                  <el-card body-style='padding: 10px;' style='margin-top: 10px;'>
                    <div>
                      <el-row :gutter='10' style='display:flex;align-items: center;'>
                        <el-col :span='1' style='display: flex;justify-content: center;'>
                          <el-avatar :src='reply.userData.avatar' />
                        </el-col>
                        <el-col :span='20' style='display: flex;align-items: center;'>
                          <h3 style='margin-right: 10px;'>{{ reply.userData.name }}</h3>
                          <strong v-if='reply.isAuthor'>作者</strong>
                          <strong class='admin' v-if='reply.userData.isAdmin'>管理员</strong>
                          <h3 v-if='reply.replyTo.commentId !== comment.commentId'> 🚩 {{ reply.replyTo.name }}</h3>
                        </el-col>
                      </el-row>

                      <el-row :gutter='10'>
                        <el-col :span='22' :offset='1'>
                          <p>{{ reply.content }}</p>
                        </el-col>
                      </el-row>

                      <el-row :gutter='10'>
                        <el-col :span='22'
                                :offset='1'
                                style='display: flex;align-items: center;justify-content: space-between;'
                        >
                          <p style='color: #8c939d;'>{{ reply.lastModified | timeFormat }}</p>
                          <div class='operations'>
                          <span class='iconfont'
                                :class="reply.isLike ? 'good-fill' : 'good'"
                                @click='switchLike(reply,comment)'
                          > {{ reply.likes.length }} </span>
                            <span class='iconfont comments-fill'
                                  @click='switchReply(reply)'> {{ reply.isReply ? '取消' : '回复' }}</span>
                            <span class='el-icon-delete-solid'
                                  @click='deleteReplyTo(reply,comment)'
                                  v-if='userData.isAdmin || userData.isAuthor || userData.name === reply.userData.name'
                            > 删除</span>
                            <span class='iconfont juBao'
                                  v-if='reply.userData.name !== userData.name'
                                  @click='tipOffComment(reply,comment)'> 举报</span>
                          </div>
                        </el-col>
                      </el-row>
                      <el-row
                        :gutter='10'
                        style='display: flex;align-items: center;justify-content: end;'
                        v-if='reply.isReply'
                      >
                        <el-col :span='1'>
                          <el-avatar :src='userData.avatar' />
                        </el-col>
                        <el-col :span='8'>
                          <el-input v-model='replyValue' :placeholder="'回复 @ ' + reply.userData.name" />
                        </el-col>
                        <el-col :span='2'>
                          <el-button type='primary' size='small' @click='replyTo(reply, comment)'>回复</el-button>
                        </el-col>
                      </el-row>
                    </div>
                  </el-card>
                </el-col>
              </el-row>

              <el-row :gutter='10' v-if='replyIndex == 1'>
                <el-col :span='12' :offset='1'>
                  <p class='showAll'>
                    <span @click='isAll = false'>收起评论 ▼</span>
                  </p>
                </el-col>
              </el-row>
            </el-row>
          </div>
        </div>
      </el-card>
    </div>
    <div v-else><el-empty description='暂无评论数据！'/></div>
    <el-dialog
      title='评论举报'
      :visible.sync='dialogVisible'
      width='30%'
    >
      <div>
        <h3>举报原因：</h3>
        <el-input type='textarea' placeholder='请输入举报原因' v-model='reason'></el-input>
      </div>

      <span slot='footer' class='dialog-footer'>
        <el-button @click='dialogVisible = false'>取 消</el-button>
        <el-button type='primary' @click='sendTipOffComment'>确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import Filters from '@/tools/Filters'
import BlogService from '@/service/blogs/BlogService'
import TipOffService from '@/service/tip-off/TipOffService'

export default {
  name: 'CommentCard',
  filters: {
    timeFormat: Filters.timeFormat
  },
  props: {
    isLogin: {
      type: Boolean,
      default: false
    },
    userData: {
      type: Object,
      default() {
        return {
          userId: undefined,
          name: '',
          avatar: '',
          approved: false,
          isAdmin: false,
          isAuthor: false
        }
      }
    },
    comments: {
      type: Array,
      default() {
        return []
      }
    },
    blogId: {
      type: Number,
      default: 0
    },
    blogAuthor: {
      type: Object,
      default() {
        return {}
      }
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      isAll: false,
      commentValue: '',
      replyValue: '',
      lastReply: null,
      dialogVisible: false,
      reason: '',
      tipOffObj: null
    }
  },
  methods: {
    // 切换回复状态
    switchReply(comment) {
      if (!this.userData?.approved) {
        return this.$message.error('未审核用户禁用评论！')
      }
      this.replyValue = ''
      comment.isReply = !comment.isReply
      // 记录上一个回复对象的状态 如果正在回复上一个对象 回复新对象就把上一个对象的回复关掉
      // 确保一次只回复一个人 不能同时回复多人
      if (this.lastReply) {
        // 如果两次回复是同一个人
        if (this.lastReply !== comment) {
          this.lastReply.isReply = false
        }
      }
      if (comment.isReply) {
        this.lastReply = comment
      }
    },

    // 切换点赞状态
    async switchLike(who, parent) {

      if (!this.isLogin) {
        return this.$message.error('无权操作，请先登录！')
      }

      if (!this.userData?.approved) {
        return this.$message.error('未审核用户禁用点赞！')
      }

      const data = {
        blogId: this.blogId,
        parentId: '',
        commentId: who.commentId
      }

      if (parent) {
        data.parentId = parent.commentId
      }

      if (who.isLike) {
        // 发起请求 取消点赞
        const res = await BlogService.unSetCommentLike(data)

        if (res.data.status !== 200) {
          return this.$message.error(res.data.message)
        }

        this.$message.success(res.data.message)
        who.isLike = false

      } else {
        // 发起请求 点赞
        const res = await BlogService.setCommentLike(data)

        if (res.data.status !== 200) {
          return this.$message.error(res.data.message)
        }
        this.$message.success(res.data.message)
        who.isLike = true
      }

      this.$emit('renderComments')
    },

    // 评论文章
    async sendComment() {

      if (!this.isLogin) {
        return this.$message.error('无权操作，请先登录！')
      }

      if (!this.userData?.approved) {
        return this.$message.error('未审核用户禁用评论！')
      }

      // 不允许发送空消息
      if (this.commentValue === '' || this.commentValue.trim() === '') {
        return this.$message.warning('请输入回复信息！')
      }

      let data = {
        blogId: this.blogId,
        content: this.commentValue
      }

      // 创建评论
      const res = await BlogService.createComment(data)

      if (res.data.status !== 200) {
        return this.$message.error(res.data.message)
      }
      this.commentValue = ''
      this.$message.success(res.data.message)
      this.$emit('renderComments')
    },

    // 删除一级评论
    async deleteComment(who) {

      if (!this.isLogin) {
        return this.$message.error('无权操作，请先登录！')
      }
      let data = {
        blogId: this.blogId,
        author_id: who.author_id,
        commentId: who.commentId
      }
      // 删除评论
      const res = await BlogService.deleteComment(data)

      if (res.data.status !== 200) {
        return this.$message.error(res.data.message)
      }

      this.$message.success(res.data.message)
      this.$emit('renderComments')
    },

    // 回复消息
    async replyTo(who, parent) {

      if (!this.isLogin) {
        return this.$message.error('无权操作，请先登录！')
      }

      if (this.replyValue === '' || this.replyValue.trim() === '') {
        return this.$message.warning('请输入回复信息！')
      }

      // 评论数据
      const data = {
        blogId: this.blogId,
        content: this.replyValue,
        parentId: '',
        replyTo: {
          author_id: who.author_id,
          commentId: who.commentId
        }
      }

      // 有父级 说明是回复子评论 需要带上父级 id
      if (parent) {
        data.parentId = parent.commentId
      }
      // 回复消息
      const res = await BlogService.createReply(data)

      if (res.data.status !== 200) {
        return this.$message.error(res.data.message)
      }

      this.$message.success(res.data.message)
      this.$emit('renderComments')
      this.replyValue = ''
      who.isReply = false
    },

    // 删除回复
    async deleteReplyTo(who, parent) {

      if (!this.isLogin) {
        return this.$message.error('无权操作，请先登录！')
      }

      // 评论数据
      const data = {
        blogId: this.blogId,
        parentId: parent.commentId,
        commentId: who.commentId
      }

      // 删除回复
      const res = await BlogService.deleteReply(data)

      if (res.data.status !== 200) {
        return this.$message.error(res.data.message)
      }

      this.$message.success(res.data.message)
      this.$emit('renderComments')
    },

    // 设置举报评论信息
    tipOffComment(who, parent) {
      if (!this.userData?.approved) {
        return this.$message.error('未审核用户禁用举报！')
      }

      this.tipOffObj = {
        blogId: this.blogId,
        parentId: parent?.commentId || '',
        commentId: who.commentId,
        commentator_id: who.author_id,
        content: who.content,
        reason: ''
      }
      this.dialogVisible = true
    },
    // 发送举报请求
    async sendTipOffComment() {

      if (this.reason === '') return this.$message.warning('请填写举报原因！')
      this.tipOffObj.reason = this.reason
      const res = await TipOffService.tipOffComment(this.tipOffObj)
      if (res.data.status !== 200) {
        this.$message.error(res.data.message)
      }
      this.$message.success(res.data.message + ' 请等待管理员审核...')
      this.reason = ''
      this.dialogVisible = false
    }
  }
}
</script>

<style scoped>
div.operations span {
  display: inline-block;
  margin-right: 20px;
  font-size: 20px;
  cursor: pointer;
  color: #36629a;
  transition: color .5s;
}

div.operations span:hover {
  color: orangered;
}

p.showAll span {
  line-height: 1.5;
  color: #8c939d;
  cursor: pointer;
  transition: color .5s;
}

p.showAll span:hover {
  color: #e3487b;
}

strong {
  margin-right: 10px;
  padding: 6px;
  border-radius: 4px;
}

div > h3 + strong {
  color: dodgerblue;
  border: 1px solid dodgerblue;
}

strong.admin {
  color: #e3487b;
  border: 1px solid #e3487b;
}

.el-row {
  line-height: 0.6 !important;
}
</style>
